<template>
	<div class="search-result">
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad"
      :error.sync='error'
		>
			<van-cell v-for="(article,index) in list" :key="index" :title="article.title" />
		</van-list>
	</div>
</template>

<script>
import { getSearchResult } from '@/api/search'
export default {
	name: 'SearchResult',
	components: {},
	props: {
		searchText: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			list: [],
			loading: false,
			finished: false,
			page: 1,
			perPage: 20,
			error: false,
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		async onLoad() {
			// 异步更新数据
			try {
				const { data } = await getSearchResult({
					page: this.page,
					per_page: this.perPage,
					q: this.searchText,
				})
				console.log(data)
				const { results } = data.data
				this.list.push(...results)

				this.loading = false
				if (results.length) {
					this.page++
				} else {
					this.finished = true
				}
			} catch (err) {
				console.log(err)
				this.error = true
				this.loading = false
				this.$toast('获取搜索结果失败，请稍后重试')
			}
		},
	},
}
</script>

<style scoped lang="less"></style>
